<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>配送司机</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="${siteurl}bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="${siteurl}plugins/FontAwesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="${siteurl}plugins/ionicons201/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="${siteurl}dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="${siteurl}dist/css/skins/_all-skins.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    [#include "/admin/common/commons.html"]

	<link rel="stylesheet" href="${siteurl}plugins/vue-element/element.css">

</head>
<style>
    .content {
        padding: 0;
    }

    ul {
        padding: 0;
        margin: 0;
        list-style: none;
        overflow: hidden;
    }

    h5 {
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        margin: 10px 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #666;
    }

    /* 导航 */
    .navigation {
        height: 60px;
        line-height: 60px;
        background-color: #f9f9f9;
        padding-left: 10px;
    }

    .navigation i {
        color: #d9dee5;
        display: inline-block;
        font-size: 14px;
        color: #666666;
        font-style: normal;
    }

    .navigation i::after {
        content: '/';
        display: inline-block;
        margin: 0 5px;
    }

    .navigation span {
        font-weight: 700;
        font-size: 14px;
        color: #666666;
    }

    /* 主页 */
    .area {
        padding: 0 10px;
        background-color: #f9f9f9;
    }

    .area_content {
        background-color: #fff;
        overflow: hidden;
        padding-left: 15px;
        padding-bottom: 20px;
    }



    .areaTypeList li {
        float: left;
        overflow: hidden;
        height: 100px;
        background-color: #f8f8f8;
        box-sizing: border-box;
        padding: 18px;
        position: relative;
        width: 32.3%;
        margin-right: 12px;
        margin-bottom: 12px;
        cursor: pointer;
    }

    .areaTypeList li img {
        width: 64px;
        height: 64px;
        border-radius: 5px;
        overflow: hidden;
        display: inline-block;
        background-color: red;
    }

    .areaTypeList li .areaList_r {
        position: absolute;
        left: 95px;
        top: 18px;
        padding: 10px 0;
    }

    .areaTypeList li p {
        margin: 0;
        font-size: 14px;
        color: #666;
    }

    .areaTypeList li p:last-child {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
    }

    [v-cloak]{
        display: none;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">

    <header class="main-header">
        <!-- Header Navbar: style can be found in header.less -->
        [#include "/admin/common/nav.html"]
    </header>

    <!-- =============================================== -->

    <!-- Left side column. contains the sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            [@user_panel /]
            <!-- search form -->
            [@sidebar_form /]
            <!-- /.search form -->
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">主面板</li>
                [@menustag id=1]
                [#list list as item]
                [@menu item "1,104,109"]
                [/@menu]
                [/#list]
                [/@menustag]
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- =============================================== -->

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <!-- Main content -->
        <section class="content">
            <!-- Default box -->

            <div class="area" id="app" v-cloak>
                <!-- 导航 -->
                <div class="navigation">
                    <i v-for="(item, index) in titleList" :key="index">{{item.text}}</i><span>{{title}}</span>
                </div>

                <div class="area_content">

                    <!-- 数据表格 -->
                    <div class="areaTable">
                        
                    </div>

                    <!-- 数据列表 -->
                    <div class="areaTypeList" v-for="(item, index) in areaList" :key="index" v-if="!show">
                        <h5>{{item.title}}</h5>
                        <ul>
                            <li class="areaList" v-for="(items, idx) in item.list" :key="idx">
                                <img :src="items.src" alt="">
                                <div class="areaList_r">
                                    <p class="areaTypeTitle">{{items.title}}</p>
                                    <p class="areaTypeDesc">{{items.desc}}</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /.box -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    [#include "/admin/common/footer.html"]

    <!-- Control Sidebar -->
    [#include "/admin/common/aside.html"]

    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script src="${siteurl}plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="${siteurl}bootstrap/js/bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="${siteurl}plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="${siteurl}plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="${siteurl}dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="${siteurl}dist/js/list.js"></script>

<!-- import Vue before Element -->
<script src="${siteurl}plugins/vue-element/vue.js"></script>
<!-- import JavaScript -->
<script src="${siteurl}plugins/vue-element/element.js"></script>

<script src="${siteurl}dist/js/echarts.js"></script>

<script>
    var vm = new Vue({
      el: '#app',
      data: function() {
        return {
            titleList: [
                {
                    text: '数据'
                }
            ],
            title: '数据报表',
            show: false,
            areaList: [
                {
                    title: '客户报表',
                    list: [
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        },
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        }
                    ]
                },
                {
                    title: '商品报表',
                    list: [
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        },
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        }
                    ]
                },
                {
                    title: '商品报表',
                    list: [
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        },
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        }
                    ]
                },
                {
                    title: '商品报表',
                    list: [
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        },
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        }
                    ]
                },
                {
                    title: '商品报表',
                    list: [
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        },
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        },
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        }
                    ]
                },
                {
                    title: '商品报表',
                    list: [
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        },
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        },
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        },
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        },
                        {
                            src: '',
                            title: '客户销售报表',
                            desc: '对客户的订单、交易额、毛利的汇总'
                        }
                    ]
                }
            ]
        }
      },
      mounted: function () {},
	  methods: {}
    })
  </script>

</body>
</html>
